<template>
  <div class="p-4.5 lg:h-full lg:flex lg:flex-col">
    <SearchForm
      v-if="searchFormProps"
      v-bind="searchFormProps"
      @add="$emit('add')"
      @search="$emit('search', $event)"
      @delete="$emit('delete', $event)"
    >
      <template #extraButtons>
        <slot name="extraButtons" />
      </template>
    </SearchForm>
    <div v-if="title" class="font-semibold text-5.7 pb-4.5 text-color-header">
      {{ title }}
    </div>
    <div class="relative lg:flex-1 rounded overflow-hidden">
      <div
        class="lg:absolute lg:top-0 lg:left-0 lg:bottom-0 bg-white border-0 border-color-split border-solid lg:border-r flex flex-col overflow-hidden"
        :class="[groupSize === 'small' ? 'lg:w-80' : 'lg:w-108']"
      >
        <div
          class="mx-7 text-xl font-semibold border-0 border-b border-color-split border-solid h-17 items-center flex flex-row"
        >
          {{ groupTitle }}
        </div>
        <div class="px-7 py-4 lg:flex-1 lg:overflow-auto">
          <slot name="group" />
        </div>
      </div>
      <div class="lg:h-full bg-white lg:flex lg:flex-col" :class="[groupSize === 'small' ? 'lg:ml-80' : 'lg:ml-108']">
        <div
          class="mx-7 text-xl font-semibold border-0 border-b border-color-split border-solid sm:h-17 sm:flex sm:flex-row items-center"
        >
          <div class="flex-1">
            <slot name="contentTitle">
              {{ contentTitle }}
            </slot>
          </div>
          <div class="py-2 sm:py-0">
            <slot name="contentTitleOper" />
          </div>
        </div>
        <slot name="content" />
      </div>
    </div>
    <slot />
  </div>
</template>
<script setup lang="ts">
import type { SearchFormProps } from "/@/types/components";
import type { ButtonProps } from "ant-design-vue";
import SearchForm from "/@/components/SearchForm.vue";

withDefaults(
  defineProps<{
    title?: string;
    searchFormProps?: SearchFormProps;
    groupSize?: ButtonProps["size"];
    //
    groupTitle: string;
    contentTitle?: string;
  }>(),
  {
    groupSize: "middle",
  }
);

defineEmits(["add", "search", "delete"]);
</script>
